import { DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Card, Form, Space, Tooltip, Input, Button, message } from 'antd';
import { useEffect, useState } from 'react';

import commonService from '@/api/services/commonService';

export default function BasePage() {
  const [form] = Form.useForm();
  const [formValue, setFormValue] = useState<any>({});

  useEffect(() => {
    form.setFieldsValue({
      ...formValue,
    });
  }, [formValue, form]);

  const onSave = (key: string) => {
    const params:any = {};
    params[key] = form.getFieldValue(key);
    commonService.putCustomApi('/admin/base-property/editProperty', params).then((res) => {
      message.success('修改成功！');
      getInfo();
    });
  };

  const getInfo = () => {
    commonService.getCustomApi('/common/baseProperty/getAllProperty', {}).then((res) => {
      setFormValue(res);
    });
  };
  

  useEffect(() => {
    getInfo();
  }, []);

  return (
    <Space direction="vertical" size="large" className="w-full">
      <Card title="基础属性管理">
        <Form
          initialValues={formValue}
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          layout='inline'
          className="gap-[10px]"
        >
          <Card title="材质">
          <Form.List name="material">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name }) => {
                  return (
                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                      <Form.Item<any> label="" name={[name]} style={{ width: '180px' }}>
                        <Input />
                      </Form.Item>
                      <Tooltip placement="top" title="删除此行">
                        <DeleteOutlined onClick={() => remove(name)} />
                      </Tooltip>
                    </Space>
                  );
                })}
                <Tooltip placement="top" title="新增一行">
                  <PlusCircleOutlined onClick={() => add()} />
                </Tooltip>
              </>
            )}
            </Form.List>
            <div className="flex justify-end w-full">
                <Button type="primary" onClick={() => onSave('material')} className="ml-4">
                  提交修改
                </Button>
              </div>
          </Card>
          <Card title="面料">
          <Form.List name="materialName">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name }) => {
                  return (
                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                      <Form.Item<any> label="" name={[name]} style={{ width: '180px' }}>
                        <Input />
                      </Form.Item>
                      <Tooltip placement="top" title="删除此行">
                        <DeleteOutlined onClick={() => remove(name)} />
                      </Tooltip>
                    </Space>
                  );
                })}
                <Tooltip placement="top" title="新增一行">
                  <PlusCircleOutlined onClick={() => add()} />
                </Tooltip>
              </>
            )}
            </Form.List>
            <div className="flex justify-end w-full">
                <Button type="primary" onClick={() => onSave('materialName')} className="ml-4">
                  提交修改
                </Button>
              </div>
          </Card>
          <Card title="尺码">
            <Form.List name="sizes">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name }) => {
                  return (
                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                      <Form.Item<any> label="" name={[name]} style={{ width: '180px' }}>
                        <Input />
                      </Form.Item>
                      <Tooltip placement="top" title="删除此行">
                        <DeleteOutlined onClick={() => remove(name)} />
                      </Tooltip>
                    </Space>
                  );
                })}
                <Tooltip placement="top" title="新增一行">
                  <PlusCircleOutlined onClick={() => add()} />
                </Tooltip>
              </>
            )}
            </Form.List>
            <div className="flex justify-end w-full">
                <Button type="primary" onClick={() => onSave('sizes')} className="ml-4">
                  提交修改
                </Button>
              </div>
          </Card>
          <Card title="供应商">
            <Form.List name="supplier">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name }) => {
                  return (
                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                      <Form.Item<any> label="" name={[name]} style={{ width: '180px' }}>
                        <Input />
                      </Form.Item>
                      <Tooltip placement="top" title="删除此行">
                        <DeleteOutlined onClick={() => remove(name)} />
                      </Tooltip>
                    </Space>
                  );
                })}
                <Tooltip placement="top" title="新增一行">
                  <PlusCircleOutlined onClick={() => add()} />
                </Tooltip>
              </>
            )}
            </Form.List>
            <div className="flex justify-end w-full">
                <Button type="primary" onClick={() => onSave('supplier')} className="ml-4">
                  提交修改
                </Button>
              </div>
          </Card>
          <Card title="适合人群">
            <Form.List name="suitFor">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name }) => {
                  return (
                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                      <Form.Item<any> label="" name={[name, 'name']} style={{ width: '180px' }}>
                        <Input />
                      </Form.Item>
                      <Form.Item<any> label="" name={[name, 'value']} style={{ width: '180px' }}>
                        <Input />
                      </Form.Item>
                      <Tooltip placement="top" title="删除此行">
                        <DeleteOutlined onClick={() => remove(name)} />
                      </Tooltip>
                    </Space>
                  );
                })}
                <Tooltip placement="top" title="新增一行">
                  <PlusCircleOutlined onClick={() => add()} />
                </Tooltip>
              </>
            )}
            </Form.List>
            <div className="flex justify-end w-full">
                <Button type="primary" onClick={() => onSave('suitFor')} className="ml-4">
                  提交修改
                </Button>
              </div>
          </Card>
          <Card title="印刷方式">
            <Form.List name="printType">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name }) => {
                  return (
                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                      <Form.Item<any> label="" name={[name, 'name']} style={{ width: '180px' }}>
                        <Input />
                      </Form.Item>
                      <Form.Item<any> label="" name={[name, 'value']} style={{ width: '180px' }}>
                        <Input />
                      </Form.Item>
                      <Tooltip placement="top" title="删除此行">
                        <DeleteOutlined onClick={() => remove(name)} />
                      </Tooltip>
                    </Space>
                  );
                })}
                <Tooltip placement="top" title="新增一行">
                  <PlusCircleOutlined onClick={() => add()} />
                </Tooltip>
              </>
            )}
            </Form.List>
            <div className="flex justify-end w-full">
                <Button type="primary" onClick={() => onSave('printType')} className="ml-4">
                  提交修改
                </Button>
              </div>
          </Card>
        </Form>
      </Card>
    </Space>
  );
}
